/**
 *
 * @Author: zhangshubin
 * @Date: 2023-12-11 11:12:39
 * @Last Modified by: zhangshubin
 * @Last Modified time: 2023-12-26 14:59:51
 * /import { Col, ColorPicker, Row, Select, Space } from 'antd'
 */
import EditorExecutor from '@/executor/EditorExecutor'
import { PropsBarState } from '@/types/index'
import { Col, ColorPicker, Row, Select, Space } from 'antd'
import { mxCell } from 'mxgraph'
import { useEffect, useState } from 'react'

interface IFillSettingProps {
  cells?: mxCell[]
  cellState: PropsBarState
}
export default function FillSetting(props: IFillSettingProps) {
  // 填充颜色
  const [fillColor, setFillColor] = useState('')
  // 填充功能可用
  const [fillDisabled, setFillDisabled] = useState(true)

  useEffect(() => {
    const { style, edges } = props.cellState
    if (style.fillColor) {
      setFillColor(style.fillColor)
    }
    if (edges.length > 0) {
      setFillDisabled(true)
    } else {
      setFillDisabled(false)
    }
  }, [props.cellState])
  return (
    <Space direction="vertical" size="small" style={{ display: 'flex' }}>
      <Row>
        <Col span={10} className="label">
          填充
        </Col>
      </Row>
      <Row gutter={10}>
        <Col span={18}>
          <Select
            options={[
              {
                label: '纯色',
                value: 1
              },
              {
                label: '线性渐变',
                value: 2
              }
            ]}
            defaultValue={1}
            disabled={fillDisabled}
            defaultActiveFirstOption={true}
            className="h-26px w-100% font-size-12px"
          />
        </Col>
        <Col span={6}>
          <ColorPicker
            value={fillColor}
            onChangeComplete={(c) => {
              const fc = c.toHexString()
              setFillColor(fc)
              EditorExecutor.setCellStyles(mxConstants.STYLE_FILLCOLOR, fc)
            }}
          />
        </Col>
      </Row>
    </Space>
  )
}
